import { getNewsDetail } from '@/services/center';
import { useRequest } from 'ahooks';
import { Card, Divider, Flex } from 'antd';
import dayjs from 'dayjs';
import { useEffect } from 'react';
import { Helmet, Link, useIntl, useParams } from 'umi';

import point from '@/assets/point.png';
import APPImg from '@/components/AppImg';
import Contact from '@/components/Contact';
import { getNewUrl, jumpUrl } from '@/utils';
const NewsDetail = () => {
  const { id = '' } = useParams();
  const { data, loading, run } = useRequest((id) => getNewsDetail({ id }), { manual: true });
  const { last, news, next } = data?.data || {};
  const { content, title, createdDate } = news || {};
  useEffect(() => {
    if (id) {
      run(id);
    }
  }, [id, run]);
  const type = news?.type;
  const intl = useIntl();

  const navList = [
    {
      url: '/news?index=1',
      word: 'home.news_flash',
      key: '1',
    },
    {
      url: '/news?index=2',
      word: 'home.investment_financing',
      key: '2',
    },
    {
      url: '/news?index=3',
      word: 'home.finance_news',
      key: '3',
    },
    // {
    //   url: '/news?index=4',
    //   word: 'home.finance_news',
    // },
  ];
  const { title: nextTitle, id: nextId, createdDate: nextCreatedDate } = next || {};
  const { title: lastTitle, id: lastId, createdDate: lastCreatedDate } = last || {};

  const list = [
    { word: 'center.pre', title: lastTitle, date: lastCreatedDate, id: lastId },
    { word: 'center.next', title: nextTitle, date: nextCreatedDate, id: nextId },
  ];
  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.meta_title' })}</title>
      </Helmet>
      <div className="newsDetail" style={{ background: '#fff', paddingBottom: 120 }}>
        <div className="common">
          <Card
            loading={loading}
            bordered={false}
            style={{
              minHeight: '50vh',
              paddingTop: 4,
              boxShadow: 'none',
              background: 'none',
            }}
          >
            <Flex gap={40} justify="space-between">
              <div style={{ flex: 1 }} className="newsDetail_words">
                <Flex gap={0}>
                  {navList.map((item, index) => {
                    const { url, word, key } = item;
                    return (
                      <div key={key} style={{ fontSize: 16 }}>
                        <Link to={getNewUrl(url)}>
                          <span
                            style={{ cursor: 'pointer', color: type == key ? '#133ea5' : '#666' }}
                          >
                            {intl.formatMessage({ id: word })}
                          </span>
                        </Link>
                        {index != navList.length - 1 ? (
                          <span style={{ color: '#848484', margin: '0 6px' }}>/</span>
                        ) : null}
                      </div>
                    );
                  })}
                </Flex>
                <h1 title={title} style={{ fontSize: 24, fontWeight: 'bold', color: '#003087' }}>
                  {title}
                </h1>
                <div style={{ margin: '15px 0 -5px 0', fontSize: 16, color: '#999999' }}>
                  {dayjs(createdDate).format('YYYY/MM/DD')}
                </div>
                <Divider type="horizontal" />
                <div dangerouslySetInnerHTML={{ __html: content }} />
              </div>

              <div
                style={{
                  width: '306px',
                  height: 'fit-content',
                }}
              >
                <div style={{ marginBottom: 28 }}>
                  <Contact />
                </div>
                <div
                  style={{
                    background: '#F1F8FD',
                    borderRadius: '6px',
                    padding: '0 24px 24px',
                    marginBottom: 30,
                    boxShadow: '0px 0px 8px 6px #E3E3E399',
                  }}
                  className="top"
                >
                  {list.map((item, index) => {
                    const { title, id, word, date } = item;
                    return (
                      id && (
                        <div
                          key={id}
                          style={{
                            padding: '24px 0',
                            paddingBottom: index != list.length - 1 ? '24px' : '0',
                            fontSize: 14,
                            borderBottom:
                              index != list.length - 1 ? '1px solid  rgba(5, 5, 5, 0.06)' : '0px',
                          }}
                        >
                          <div style={{ color: '#657188', opacity: 0.5 }}>
                            {intl.formatMessage({ id: word })}
                          </div>
                          {id ? (
                            <>
                              <div
                                onClick={() => {
                                  jumpUrl(`/newsDetail/${id}`);
                                }}
                                style={{
                                  margin: '16px 0 8px 0',
                                  color: '#003087',
                                  cursor: 'pointer',
                                }}
                              >
                                {title}
                              </div>
                              <div style={{ color: '#ABB4C2' }}>
                                {dayjs(date).format('YYYY/MM/DD')}
                              </div>
                            </>
                          ) : null}
                        </div>
                      )
                    );
                  })}
                  <div
                    style={{
                      background: '#011C64',
                      color: '#fff',
                      fontSize: 16,
                      padding: '16px 0',
                      borderRadius: 30,
                      cursor: 'pointer',
                      marginTop: 24,
                    }}
                    onClick={() => {
                      jumpUrl('/news');
                    }}
                  >
                    <Flex align="center" justify="center">
                      <img src={point} width={18} height={18} style={{ marginRight: 12 }} />
                      {intl.formatMessage({ id: 'center.back_list' })}
                    </Flex>
                  </div>
                </div>
                <div className="bottom">
                  <APPImg className="app_img_style" />
                </div>
              </div>
            </Flex>
          </Card>
        </div>
      </div>
    </>
  );
};

export default NewsDetail;
